<template>
	<view class="container">
		<view class="u-bg">
			<cu-custom title="收益" bgColor="" :isBack="true">
				<block v-slot:content>收益</block>
			</cu-custom>
			<view class="w-txt flex align-center">
				<image src="https://www.qfclwt.com/public/w-img1.png" />
				<text>收益安全有保障</text>
			</view>
		</view>
		<view class="u-cen w-mar">
			<view class="flex justify-between w-balance">
				<view class="flex flex-direction">
					<text class="">账户余额(元)</text>
					<text class="w-txt1 margin-top">￥{{userinfo.surplus}}</text>
				</view>
				<view class="flex flex-direction ">
					<text class="flex justify-end">累计收益</text>
					<text class="w-txt2 margin-top">0.00</text>
				</view>
			</view>
			<view class="w-b flex justify-between">
				<button>任务收益</button>
				<button class="w-but">余额提现</button>
			</view>
		</view>
		<view class="u-cen w-mar2 padding-tb">
			<view class="flex justify-between padding-sm">
				<view class="size-32 text-bold">账户明细</view>
				<view class="w-fon1">全部 ></view>
			</view>
			<view class="cu-line"></view>
			<cu-blank v-if="gridList.length==0" height="60vh" @action="onCommentsPage"
				customStyle="borders" content="暂无收益"></cu-blank>
			<view v-else class="padding-tb-xs">
				<view v-for="(item,index) in gridList" :key="index"
					class="flex justify-between align-center w-list padding-lr">
					<view class="flex flex-direction">
						<view class="size-32 text-bold">{{item.name}}
						<text v-if="item.state==1" class="cu-tag round bg-orange">已结算</text>
						<text v-else class="cu-tag round bg-blue">待结算</text>
						</view>
						<view class="w-fon1 size-24">{{item.createTime}}</view>
					</view>
					<view class="size-42 text-bold text-red">+{{item.rebate}}元</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import cuCustom from '@/components/cu-custom.vue';
	import { useSettingStore } from '@/stores/index';
	import cuBlank from '@/components/cu-blank.vue';
	import { onShow } from '@dcloudio/uni-app';
	import { accountInfo } from '@/common/api/user'
	const setting = useSettingStore();
	const gridList = ref([
		{
			state: 1,
			createTime: '2023-09-10 16:40:30',
			rebate: 10,
			name: "好友在源食堂消费返佣"
		}
	])
	const userinfo = ref({
		"id": "",
		"username": "",
		"realName": "",
		"nickname": "",
		"avatarUrl": "",
		"phone": "",
		"address": "",
		"email": "",
		"birthday": "",
		"gender": 1,
		"roleKeys": "",
		"msgNum": "0",
		"surplus": 0.00,
		"integral": 0
	})
	const onLoadUser = async () => {
		const res : any = await accountInfo({});
		if (res.code == 1000) {
			userinfo.value = res.data
			setting.userInfo = res.data
			queryParams.value.userId = userinfo.value.id
			onCommentsPage()
		}
	}
	const queryParams = ref({
		page: 1,
		size: 10,
		total: 10,
		userId: ""
	});
	const onCommentsPage = async () => {
		uni.stopPullDownRefresh();
	};

	onShow(() => {
		onLoadUser()
		gridList.value=[]
	});
</script>

<style scoped>
	.u-bg {
		color: #ffffff;
		background: linear-gradient(180deg, #356FFD 0%, #66A8FF 100%);
		padding-bottom: 120rpx;
	}

	.u-bg .w-txt {
		font-size: 28rpx;
		margin-top: 70rpx;
		padding-left: 60rpx;
	}

	.u-bg .w-txt image {
		width: 24rpx;
		height: 28rpx;
	}

	.u-cen {
		background: #fff;
		border-radius: 20rpx;
		color: #222222;
		padding: 20rpx 30rpx;
	}

	.w-mar {
		margin: -100rpx 30rpx 0;
	}

	.w-mar2 {
		margin: 40rpx 30rpx;
		padding: 40rpx 30rpx 0rpx;
	}

	.u-cen .w-balance {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
		padding: 40rpx 0;
		font-size: 28rpx;
	}

	.u-cen .w-balance .w-txt1 {
		font-weight: 400;
		color: #222222;
		font-size: 54rpx;
		line-height: 58rpx;
	}

	.u-cen .w-balance .w-txt2 {
		font-weight: 400;
		color: #999999;
		font-size: 54rpx;
		line-height: 58rpx;
	}

	.w-b {
		padding: 60rpx 0;
	}

	.w-b button {
		width: 300rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #222222;
	}

	.w-b .w-but {
		background: #4287FC;
		color: #ffffff;
		border: 0;
	}

	.u-cen .w-fon1 {
		color: #999999;
		font-size: 32rpx;
	}

	.u-cen .w-list .w-fon1 {
		margin-top: 16rpx;
	}

	.u-cen .w-list {
		margin: 50rpx 0;
	}
</style>